<template>
  <div>
    <!-- 轮播图区域 -->
    <van-swipe :height="175" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipeList" :key="item.goods_id">
        <img :src="item.image_src" alt="">
      </van-swipe-item>
    </van-swipe>


    <!-- 分类区域 -->
     <div class="cate">
      <div v-for="(item,index) in cates" :key="index" @click="tocate(index)">
        <img :src="item.image_src" alt />
      </div>
    </div>


    <!-- 商品展示区域 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <div class="floor" v-for="(item,index) in floorData" :key="index">
          <div>
            <img :src="item.floor_title.image_src" alt />
          </div>
          <div class="pic">
            <van-row>
              <van-col span="8">
                <img class="one"
                  @click="cateList(item.product_list[0].navigator_url)"
                  :src="item.product_list[0].image_src"
                  alt
                />
              </van-col>
              <van-col span="8">
                <van-row>
                  <van-col>
                    <img
                      @click="cateList(item.product_list[1].navigator_url)"
                      :src="item.product_list[1].image_src"
                      alt
                    />
                  </van-col>
                </van-row>
                <van-row>
                  <van-col>
                    <img
                      @click="cateList(item.product_list[2].navigator_url)"
                      :src="item.product_list[2].image_src"
                      alt
                    />
                  </van-col>
                </van-row>
              </van-col>
              <van-col span="8">
                <van-row>
                  <van-col>
                    <img
                      @click="cateList(item.product_list[3].navigator_url)"
                      :src="item.product_list[3].image_src"
                      alt
                    />
                  </van-col>
                </van-row>
                <van-row>
                  <van-col>
                    <img
                      @click="cateList(item.product_list[4].navigator_url)"
                      :src="item.product_list[4].image_src"
                      alt
                    />
                  </van-col>
                </van-row>
              </van-col>
            </van-row>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    
  </div>
</template>

<script>
export default {
  data() {
    return { 
       loading: false,
      finished: false,
      isLoading: false,
       // 分类图片列表
      cates: [],
      swipeList: [] ,
       // 首页楼层数据
      floorData: [],
      goodsinfo: [],
       //  商品列表请求参数
      queryinfo: "",
      };
  },

 

  created() {
    this.getSwipeList();
    this.getCatesList();
    this.getFloorData();
  },
  methods: {
    // 获取home页 轮播图数据
    async getSwipeList() {
      const { data: res } = await this.$http.get("/home/swiperdata");
      if (res.meta.status !== 200) {
        return this.$toast.fail("数据加载失败");
      }
      this.swipeList = res.message;
      console.log(res);
    },
     // 请求home页分类选项数据
    async getCatesList() {
      var { data } = await this.$http.get("/home/catitems");
      console.log(data)
      if (data.meta.status !== 200) {
        return this.$notify("分类图片加载成失败");
      }
      this.cates = data.message;
      
      // console.log(this.cates);
    },
        // 请求首页楼层数据
    async getFloorData() {
      var { data } = await this.$http.get("/home/floordata");
      if (data.meta.status !== 200) {
        return this.$notify("楼层图片加载成失败");
      }
      this.floorData = data.message;

      // console.log(this.floorData);
    },
    onLoad() {
      this.getFloorData();
      if (this.floorData) {
        this.loading = false;
        this.finished = true;
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 500);
    },
   cateList(url) {
      // console.log(url);
      this.queryinfo = url.split("=")[1];
     
     
      window.sessionStorage.setItem('query', this.queryinfo)
      // console.log(this.goodsinfo);
      this.$router.push('/goodslist')
    },
    // 轮播图详情
    getGoodInfo(i) {
      // console.log(data);
      this.$router.push(this.swipeUrl[i]);
      window.sessionStorage.setItem("goodid", this.SwipeId[i].split("=")[1]);
      // console.log(this.swipeUrl[i]);
    }
  }
};
</script>

<style lang="less" scoped>
.swipe {
  margin-top: 46px;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
img {
  width: 100%;
}
.cate {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
  // height: 186px;
  a {
    width: 64px;
    height: 70px;
    
    
  }
  img {
      width: 64px;
      height: 70px;
    }
}
.pic {
  padding-left: 10px;
  .one {
    width: 116px;
    height: 180px;

  }
   img {
    width: 116px;
    height: 80px;
  }
 
}


</style>